<template>
	<view class="container">
		<view class="conter">
			<view class="come">欢迎登录</view>
			<view style="width: 616rpx;">
				<u-form labelWidth="120rpx" :labelStyle="{ color: '#FFFFFF', fontSize: '30rpx',opacity:'0.6' }"
					labelPosition="top" :model="userInfo" :rules="rules" ref="uForm">
					<u-form-item label="手机号" prop="mobile" ref="item1">
						<view class="ipt">
							<u-input type="number" maxlength="11" fontSize="32rpx" color="#FFFFFF" placeholderClass="placeholderClass"
								placeholder="请输入手机号" border="none" v-model="userInfo.mobile"></u-input>
						</view>
					</u-form-item>

					<u-form-item label="密码" prop="password" ref="item1">
						<view class="ipt">
							<u-input type="password" fontSize="32rpx" color="#FFFFFF"
								placeholderClass="placeholderClass" placeholder="请输入密码" border="none"
								v-model="userInfo.password"></u-input>
						</view>
					</u-form-item>
				</u-form>
				<view style="margin-top: 30rpx;">
					<u-button :custom-style="customStyleBtn1" @click="submit" :loading="loading">
						<image src="/static/login.png" mode="widthFix" style="width: 30rpx;margin-right: 10rpx;"></image>
						登录
					</u-button>
				</view>
			</view>
			<view class="bottomStyle">
				<view @click="regiShow = true">注册账号</view>
				<view @click="retrShow = true">忘记密码</view>
			</view>
		</view>
		<registerVue ref="regRef" :show="regiShow" @success="regiShow=false"/>
		<retrievePasswordVue :show="retrShow" @success="retrShow=false"/>
	</view>
</template>

<script>
	import {setToken} from '@/utils/common.js'
	import {login} from '@/api/login.js'
	import registerVue from './components/register.vue'
	import retrievePasswordVue from './components/retrievePassword.vue'
	export default {
		components:{
			registerVue,
			retrievePasswordVue
		},
		data() {
			return {
				loading:false,
				customStyleBtn1: {
					width: '616rpx',
					height: '96rpx',
					borderRadius: '30rpx',
					background: 'linear-gradient(to right, #704BF7, #0CECA6)',
					fontSize: '33rpx',
					fontWeight: 800,
					color: '#FFFFFF',
					border: 'none',
					lineHight: '50rpx !important',
					letterSpacing: '1px',
					isEye: false
				},
				rules: {
					mobile: [{
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}]
				},
				userInfo: {
					imei:'4f5f1c41264d00c3',
					mobile: '',
					password: ''
				},
				regiShow:false,
				retrShow:false
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate().then(async res => {
					try {
						// #ifdef APP-PLUS
						this.userInfo.imei = uni.getSystemInfoSync().oaid
						// #endif
						let loginRes  = await login(this.userInfo)
						this.loading = false
						// 添加token至缓存
						setToken(loginRes.data)
						uni.switchTab({
							url: '/pages/index/index'
						})
					} catch (error) {
						this.loading = false
					}
					
				}).catch(errors => {})
			}
		}
	}
</script>

<style scoped>
	.bottomStyle {
		width: 616rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 40rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		opacity: 0.6;
	}

	.placeholderClass {
		font-size: 32rpx;
		opacity: 0.8;
	}

	.ipt {
		width: 616rpx;
		height: 100rpx;
		border-radius: 30rpx;
		background-color: #22304D;
		border: 4rpx solid #313F5A;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.come {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 40rpx;
		font-weight: bold;
		color: #FFFFFF;
		opacity: 0.8;
	}

	.conter {
		width: 700rpx;
		max-height: 750rpx;
		background-color: #162644;
		border: 4rpx solid #293753;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 50rpx 0;
		box-sizing: border-box;
	}

	.container {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
	}

</style>